/**********
@name: input单行文本组件
@describtion: props: title:字段别名,value:字段值
@author:liubingye
@date:2023-02-10 10:29:07
***********/
<template>
  <div class="text-outer-box">
    <div class="editor-icon" v-if="props.children && props.children.length > 0" @click="changeChildrenShow">
      <span :class="{ plus: childrenShow }"></span>
    </div>
    <el-form-item class="text-form-item" :label="props.title" :prop="props.field">
      <el-input
          v-model="inputVal"
          :placeholder="props.placeholder"
          maxlength="100"
          show-word-limit
      ></el-input>
    </el-form-item>
  </div>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false,
  },
  field: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:value','update:childrenShow'])
const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value',val)
  }
})
const childrenShow = computed(() => props.childrenShow)
const changeChildrenShow = () => {
  emits("update:childrenShow", !childrenShow.value)
}
</script>

<style scoped lang="scss">
.text-outer-box{
  height: 56px;
  box-sizing: border-box;
  border-bottom: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  .editor-icon {
    height: 16px;
    width: 16px;
    background-color: $mainColor;
    position: relative;
    border-radius: 2px;
    margin: 0 5px 0 0;
    cursor: pointer;
    span {
      display: block;
      height: 100%;
      width: 100%;
    }
    span.plus:after {
      height: 0;
      top: 7px;
    }
    span:before,
    span:after {
      content: "";
      display: block;
      background-color: #fff;
      position: absolute;
      transition: all 0.3s;
    }
    span:before {
      height: 2px;
      width: 10px;
      left: 3px;
      top: 7px;
    }
    span:after {
      height: 10px;
      width: 2px;
      left: 7px;
      top: 3px;
    }
  }
  ::v-deep(.el-form-item){
    margin-bottom: 0;
    width: 100%;
    .el-form-item__error{
      top: 85%;
    }
  }
  ::v-deep(.el-input__wrapper){
    box-shadow: none;
  }
}
</style>
